<template>
    <div class="contain">
      <!-- 模块一 -->
       <div class="box">
        <div class="title">
           {{ loadDate01.title || '标题' }}
       </div>
       <ul class="list">
          <li class="list-item" v-for="item in loadDate01.list" :key="item.id">
              <img class="item-img" :src="item.img" alt="" />
              <div class="item-name">{{ item.name }}</div>
              <div class="item-desc">{{ item.desc }}</div>
          </li>
       </ul>
       </div>
       <!-- 模块2 -->
       <div class="box">
        <div class="title">
           {{ loadDate02.title || '标题' }}
       </div>
       <ul class="list">
          <li class="list-item" v-for="item in loadDate02.list" :key="item.id">
              <img class="item-img" :src="item.img" alt="" />
              <div class="item-name">{{ item.name }}</div>
              <div class="item-desc">{{ item.desc }}</div>
          </li>
       </ul>
       </div>
       <!-- 模块3  当看到3的时候请求-->
       <div class="box" ref="box3">
        <div class="title">
           {{ loadDate03.title || '标题' }}
       </div>
       <ul class="list">
          <li class="list-item" v-for="item in loadDate03.list" :key="item.id">
              <img class="item-img" :src="item.img" alt="" />
              <div class="item-name">{{ item.name }}</div>
              <div class="item-desc">{{ item.desc }}</div>
          </li>
       </ul>
       </div>
    </div>
  </template>

<script setup>
import { onMounted, ref } from 'vue'
import { dataLazy01, dataLazy02, dataLazy03 } from '@/api/dataLayApi.js'
// import { useIntersectionObserver } from '@vueuse/core'
// const dataList = [1, 2, 3, 4, 5, 6]
const loadDate01 = ref([])
const box3 = ref(null)
const getdata01 = async () => {
  loadDate01.value = await dataLazy01()
}
getdata01()

const loadDate02 = ref({})
const getdata02 = async () => {
  loadDate02.value = await dataLazy02()
  console.log(loadDate02.value, 'data02')
}
getdata02()

const loadDate03 = ref({})
const getdata03 = async () => {
  loadDate03.value = await dataLazy03()
  console.log(loadDate03.value, 'data03')
}

// 测试代码

onMounted(() => {
  const options = {
    root: null // 根元素，默认为浏览器视口
    // rootMargin: '0px', // 根元素的外边距
    // threshold: 1.0 // 交叉比例的阈值，触发回调函数的条件
  }
  const observer = new IntersectionObserver(function (entries) {
    // 方式一
    // entries.forEach(item => {
    //   if (item.isIntersecting) {
    //     getdata03()
    //     observer.unobserve(item.target) // 停止观察当前元素 避免不可见时候再次调用callback函数
    //   }
    // })
    // 方式二
    if (entries[0].isIntersecting) {
      getdata03()// 当看到模块三的时候，请求数据
    }
  }, options)

  observer.observe(box3.value)
})
</script>

<style lang="scss" scoped>
.contain {
   background-color:#f5f5f5;
   padding:18px;
   .box{
     margin:46px 0;
     padding:20px 0;
     min-height:350px;
   }
   .title {
     font-size:26px;
     margin:1 8px;
   }
   .list{
     list-style-type:none;
     display: flex;
     justify-content:space-between;
    //  background-color:yellow;
    //  min-height:700px ;
    //  border:1px solid;
     .list-item{
      border:1px solid #ccc;
      width:234px;
      padding:15px 0;
      display:flex;
      flex-direction:column;
      // justify-content:center;
      align-items:center;
      .item-img{
        width:160px;
        height:160px;
      }
      .item-name{
        font-size:14px;
        color:#333;
        margin-top:18px;
      }
      .item-desc{
        font-size:12px;
        color:#b0b0b0;
        margin:6px;
      }
     }
   }

}
</style>
